<!doctype html><html><head>
<title>background: -uu-gradient</title>
<style> 
@import url(../../README.css);
.view {
  padding: 10px; /* shadow padding */
}
.radial {
  width:150px; height:150px; border:2px solid black;
  -uu-background-image:
    -uu-gradient(radial, 45 45, 10, 52 50, 30, from(#A7D30C), to(rgba(1,159,98,0)), color-stop(90%, #019F62)),
    -uu-gradient(radial, 105 105, 20, 112 120, 50, from(#ff5f98), to(rgba(255,1,136,0)), color-stop(75%, #ff0188)),
    -uu-gradient(radial, 95 15, 15, 102 20, 40, from(#00c9ff), to(rgba(0,201,255,0)), color-stop(80%, #00b5e2)),
    -uu-gradient(radial, 0 150, 50, 0 140, 90, from(#f4f201), to(rgba(228, 199,0,0)), color-stop(80%, #e4c700));
}
.linear {
  width:130px; height:130px; border:2px solid black; padding: 10px; 
  -uu-background-image: -uu-gradient(linear, left top, left bottom, from(#00abeb), to(#fff), color-stop(0.5, #fff), color-stop(0.5, #66cc00));
}
</style>
<script type="text/xaml" id="xaml"><?xml version="1.0"?>
  <Canvas xmlns="http://schemas.microsoft.com/client/2007"></Canvas></script>
<!--
<script src="../../../src/uuMeta.js"></script>
<script src="../../../src/uuMeta.data.js"></script>
<script src="../../../src/uuMeta.event.resize.js"></script>
<script src="../../../src/uuToken.js"></script>
<script src="../../../src/uuImage.js"></script>
<script src="../../../src/uuStyle.js"></script>
<script src="../../../src/uuStyleSheet.js"></script>
<script src="../../../src/uuQuery.js"></script>
<script src="../../../src/uuColor.js"></script>
<script src="../../../src/uuCanvas.js"></script>
<script src="../../../src/uuLayer.js"></script>
<script src="../../../src/uuCSSValidator.js"></script>
<script src="../../../src/uuAltCSS.js"></script>
<script src="../../../src/uuAltCSS+.js"></script>
<script src="../../../src/uuAltCSS+.ie.js"></script>
 -->
<script src="../../uuAltCSS.js"></script>


</head><body>

<h1>Radial Gradient Example</h1> 

<div class="view">
  <div class="radial"></div> 
</div>
<pre class="eg">
.radial {
  width:150px; height:150px; border:2px solid black;
  -uu-background-image:
    -uu-gradient(radial, 45 45, 10, 52 50, 30,
                        from(#A7D30C), to(rgba(1,159,98,0)), color-stop(90%, #019F62)),
    -uu-gradient(radial, 105 105, 20, 112 120, 50,
                        from(#ff5f98), to(rgba(255,1,136,0)), color-stop(75%, #ff0188)),
    -uu-gradient(radial, 95 15, 15, 102 20, 40,
                        from(#00c9ff), to(rgba(0,201,255,0)), color-stop(80%, #00b5e2)),
    -uu-gradient(radial, 0 150, 50, 0 140, 90,
                        from(#f4f201), to(rgba(228, 199,0,0)), color-stop(80%, #e4c700));
}
</pre>



<h1>Linear Gradient Example</h1> 

<div class="view">
  <div class="linear"></div>
</div>
<pre class="eg">
.linear {
  width:130px; height:130px; border:2px solid black; padding: 10px; 
  -uu-background-image:
      -uu-gradient(linear, left top, left bottom,
                         from(#00abeb), to(#fff), color-stop(0.5, #fff), color-stop(0.5, #66cc00));
}
</pre>

</body></html>
